<template>
  <div class="add-customer">
    <a-form-model
      ref="projectForm"
      @submit.prevent="submit"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
      :model="form"
    >
      <a-form-model-item label="客户名称" ref="name" prop="name">
        <a-input @blur="fieldSingle('name')" v-model="form.name" placeholder="请填写客户名称"/>
      </a-form-model-item>
      <a-form-model-item label="手机号" ref="phoneNumber" prop="phoneNumber">
        <a-input @blur="fieldSingle('name')" v-model="form.phoneNumber" placeholder="请填写客户手机号"/>
      </a-form-model-item>
      <a-form-model-item label="所属人员" ref="selectPerson" prop="selectPerson" required>
        <a-select
          show-search
          v-model="form.value"
          style="width: 100%;"
          placeholder="请输入想要分配的公司职员的名字或者手机号"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @search="handleSearch"
        >
          <a-select-option v-for="(item, index) in data" :value="item.userId" :key="index +'user-option'">
            <div> <span>
                {{ item.username }}
              </span>
              <span>{{ item.mobile }}</span>
              <span>{{ item.deptName }}</span></div>
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{offset:4}">
        <a-button type="primary" htmlType="submit">
          Submit
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import db from "../../utils/localstorage";

export default {
  name: 'Customer',
  created() {
    this.user = db.get('USER')
  },
  data() {
    const checkSelectPerson = (rule,value,callback)=>{
      if(this.form.value){
        callback()
      }else{
        callback(new Error('please select the item'))

      }
    }
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      rules: {
        name: [
          {
            required: true,
            message: 'please input your name',
            trigger: 'blur'
          },
        ],
        phoneNumber: [
          {required: true, message: "please input your phoneNumber", trigger: 'blur'},
        ],
        selectPerson: [{validator:checkSelectPerson, trigger: 'change' }],
      },
      form: {
        name: '',
        phoneNumber: '',
      },
      data: [],
    }
  },
  computed: {},
  methods: {
    fieldSingle(singleName) {
      this.$refs[singleName].onFieldBlur()
    },
    submit() {
      this.$refs.projectForm.validate((value, msgs) => {
        if (value === true) {
          //  验证通过在这里进行数据的总结和进行数据提交
          const item = this.data.filter(item => item.userId == this.form.value)
          console.log(item)
          const data = {
            "mobile": this.form.phoneNumber,
            "name": this.form.name,
            "userId": item[0].userId,
            "userName": item[0].username
          }
          this.$post('/customer',data).then(res=>{
            if(res.data.code === '200'){
              this.$message.success('添加成功')
            }
          })
        }
      })
    },
    handleSearch(value) {
      clearTimeout(this.timer)
      if (value) {
        this.timer = setTimeout(() => {
          this.$get('/common/user/list', {
            key: value
          }).then(res => {

            if (res.data.code === '200') {
              this.data = res.data.data
            }
          })
        }, 1000)
      }

    },
    handleChange(value) {
      this.form.value = value
    },
  }
}
</script>

<style scoped>
.add-customer {
  width: 50%;
  position: relative;
  left: 50%;
  top: 10%;
  transform: translate(-50%);
}
</style>
